<template>
    <el-row type="flex" class="gender-ratio">
        <div v-auto-resize ref="chartEl" class="chart-wrap gender-ratio_item" style="height: 200px"/>
        <div class="gender-ratio_item ratio-info">
            <el-row type="flex" v-for="{img, label, ratio} in ratioArray" :key="label" class="ratio-info_row">
                <el-col :span="6">
                    <img :src="img" alt="Icon">
                </el-col>
                <el-col :span="6">
                    <span class="label">{{label}}</span>
                </el-col>
                <el-col :span="12">
                    <span class="ratio">{{ratio}}%</span>
                </el-col>
            </el-row>
        </div>
    </el-row>
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'
import { subComponentMixin } from '@/mixins/user-data'

let oChart
export default {
  name: 'GenderRatio',
  mixins: [EchartsBase, subComponentMixin],
  directives: {
    AutoResize
  },
  data () {
    return {
      ratioArray: [
        {
          img: '',
          label: '男',
          ratio: '11.4'
        }, {
          img: '',
          label: '女',
          ratio: '11.4'
        }, {
          img: '',
          label: '未知',
          ratio: '11.4'
        }
      ]
    }
  },
  created () {
    this.$nextTick().then(() => {
      oChart = echarts.init(this.$refs.chartEl)
      this.setOption()
    })
  },
  methods: {
    setOption () {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      }
      oChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    .chart-wrap {
        width: 100%;
        height: 100%;
    }
    .gender-ratio_item {
        flex: 1 1 50%;
    }
    .ratio-info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .ratio-info_row {
            img {
                width:15px;
                height:28px;
            }
            .label, .ratio {
                font-weight: bold;
            }
            .ratio {
                color: $--color-text-regular;
            }
        }
    }
</style>
